<template>
    <van-nav-bar
  title="个人中心"
  left-text="返回"
  right-text="退出登录"
  left-arrow
  @click-left="fanhui"
  @click-right="tuichu"
/>

  <van-cell title="头像" :value="table.imgs"  @click="addShow">
    <van-image
  width="50"
  height="50"
  :src="table.imgs"
/>
    </van-cell>

  <van-cell title="昵称" is-link to="/nicheng">
   <template #default>
    <span>{{ table.nickname }}</span>
   </template>
  </van-cell>

<van-cell title="姓名" >
  <template #default>
    <span>{{ table.cardName }}</span>
  </template>
</van-cell>

<van-cell title="性别" >
  <template #default>
    <span>
        {{ table.sex == 1 ? '男' : table.sex== 0 ? '女' : '未填写'}}</span>
  </template>
</van-cell>

<van-cell title="实名认证" is-link to="/authentication">
  <template #default>
    <span> {{ table.status == 1 ? '已实名' : '未实名' }}</span>
  </template>
</van-cell>

<van-cell title="我的电卡" is-link to="/card">
  <template #default>
    <span>{{  }}</span>
  </template>
</van-cell>

<van-cell title="收藏站点" is-link to="/site">
  <template #default>
    <span>{{  }}</span>
  </template>
</van-cell>
<van-cell title="活动中心" is-link to="/huodong">
  <template #default>
    <span>{{  }}</span>
  </template>
</van-cell>

<van-cell title="手机号" >
  <template #default>
    <span>{{ table.phone }}</span>
  </template>
</van-cell>

<van-cell title="微信">
  <template #default>
    <span> {{ table.status == 1 ? '已绑定' : '未绑定' }}</span>
  </template>
</van-cell>
<!--预约信息单元格-->
  <van-cell
      title="预约信息"  is-link to="/yuyue"
  />
  <!-- 预约信息列表 -->
  <van-popup
      v-model:show="showReservation"
      position="bottom"
      round
      closeable
      close-icon="close"
      :style="{ height: '400px' }"
  >
    <van-empty v-if="reservationList.length <= 0" description="暂无预约" />
  </van-popup>
<!-- 优惠券单元格 -->
<van-coupon-cell
  :coupons="coupons"
  @click="showList = true"
/>
<!-- 优惠券列表 -->
<van-popup

  v-model:show="showList"
  round
  position="bottom"
  style="height: 90%; padding-top: 4px;"
>
  <van-cell title="使用说明" is-link to="yhjshuoming"/>
  <van-coupon-list
    :coupons="coupons"
    :chosen-coupon="chosenCoupon"
    :disabled-coupons="disabledCoupons"
  />
</van-popup>

<!-- 跳转到钱包 -->
<van-cell title="我的钱包"  is-link to="/purse">
</van-cell>


  <!--修改头像-->
  <el-dialog v-model="dialogVisible" title="修改头像" width="412px">
    <el-form>
      <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8960/admin/system/fileUpload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :headers="headers"
        >
          <img v-if="sysUser.imgs" :src="sysUser.imgs" style="width: 200px; height: 200px;" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
    
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ref,reactive } from 'vue';
import { userinfo,userupdate,preferential,Notpreferential } from '@/api/userinfo';
import { showSuccessToast, showFailToast } from 'vant';
import {logout} from "@/api/login.js";
import {ElMessage} from "element-plus";
const router = useRouter();
const table =ref({
  imgs:"",
  cardName:'',
  nickname:"",
  sex:"",
  status:"",
  phone:"",
  weChar:""
})


///////////////用户添加 和  修改
const dialogVisible = ref(false)

const form = {}
const sysUser = ref(form)

//点击修改按钮弹出框，数据回显
const editSysUser = row => {
  sysUser.value = { ...row }
  dialogVisible.value = true
}

//点击添加弹出框
const addShow = () => {
  dialogVisible.value = true
}

//提交方法
const submit = async () => {
    //修改
    const { data } = await userupdate(sysUser.value)
    if (data.code == 200) {
      dialogVisible.value = false
      showSuccessToast('保存成功');
      window.location.reload()
      router.push("/userinfo")
    }
}
// 图像上传成功以后的事件处理函数
const handleAvatarSuccess = (response, uploadFile) => {
    sysUser.value.imgs = response.data
}


// 可用优惠卷数组
    const coupons = ref([]);
    //不可用优惠卷数组
    const disabledCoupons=ref([])

    const showReservation = ref(false);
    const reservationList = ref([])
    const showList = ref(false);
    const chosenCoupon = ref(-1);

   // 后端优惠卷数据查询
  const preferentiallist = async () => {
  const { data } = await preferential()
  console.log(data);

  if(data.code==200){
// 遍历 elements 数组
      data.data.forEach(element => {
      element.condition=element.remark
      element.name=element.preferentialName
      element.startAt = element.startDateTime
      element.endAt =element.endDateTime
      element.valueDesc=element.perferentialMoney
      element.description=element.num
    });
    coupons.value=data.data
  }
}
preferentiallist()



  // 后端优惠卷不可用数据查询
  const preferentialnot = async () => {
  const { data } = await Notpreferential()
  console.log(data);
  if(data.code==200){
    // 遍历 elements 数组
    data.data.forEach(element => {
      element.condition=element.remark
      element.name=element.preferentialName
      element.startAt = element.startDateTime
      element.endAt =element.endDateTime
      element.valueDesc=element.perferentialMoney
      element.reason=element.preason
      disabledCoupons.value=data.data
}
    );
  

  }
}
preferentialnot()

// 根据登录查看用户信息
const user = async () => {
  const { data } = await userinfo()
  if(data.code==200) {
    table.value = data.data
  }
}
user()
// 返回
const fanhui = () => {
  router.push('/home')
}
const tuichu=async ()=>{
    const {data}=await logout();
    if(data.code==200){
      ElMessage.success(data.message)
      sessionStorage.removeItem("token_key")
      router.push('/login')
    }else{
      ElMessage.success(data.message)
    }
}
</script>
